<template>
    <view class="search-container">
        <view class="px-[24rpx] py-[14rpx] bg-white">
            <u-search
                v-model="keyword"
                placeholder="请输入关键词"
                @search="handleSearch"
                @custom="handleSearch"
                @clear="searchData.is_search = false"
            ></u-search>
        </view>
        <view class="search-content pt-[20rpx]" v-show="searchData.is_search">
            <z-paging
                ref="paging"
                v-model="searchData.result"
                @query="searchList"
                :fixed="false"
                height="100%"
            >
                <view v-for="item in searchData.result" :key="item.id">
                    <articleItem :item="item" :id="item.id"></articleItem>
                </view>
            </z-paging>
        </view>
        <view class="history-content" v-if="!searchData.is_search">
            <view class="flex justify-between px-[24rpx] pb-[10rpx] pt-[30rpx]">
                <view class="text-lg font-medium">历史搜索</view>
                <view class="text-xs leading-7" @click="clearHistoreSearch"
                    >清空</view
                >
            </view>
            <view class="w-full px-[24rpx]">
                <block
                    v-for="(hisItem, index) in searchData.search_history"
                    :key="index"
                >
                    <view
                        class="keyword truncate"
                        @click="handleHistoreSearch(hisItem)"
                        >{{ hisItem }}</view
                    >
                </block>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, shallowRef } from "vue";
import storage from "@/utils/storage";
import { PREFIX, SEARCH_HISTORY } from "@/enums/storageEnums";
import { articleList } from "@/api/cms/article";
import { messageError } from "@/utils/message";

const keyword = ref("");
const paging = shallowRef();

const searchData = reactive({
    search_history: [],
    result: [],
    is_search: false,
});

const handleSearch = (value: string) => {
    if (!value && !searchData.is_search)
        return messageError("请输入搜索关键词");
    searchData.is_search = true;
    keyword.value = value;
    if (keyword.value) {
        if (!searchData.search_history.includes(keyword.value)) {
            searchData.search_history.unshift(keyword.value);
            storage.set(PREFIX + SEARCH_HISTORY, searchData.search_history);
        }
        paging.value.reload();
    } else {
        searchData.is_search = false;
    }
};

const handleHistoreSearch = (text: string) => {
    handleSearch(text);
};

const clearHistoreSearch = () => {
    storage.delete(PREFIX + SEARCH_HISTORY);
    searchData.search_history = [];
};

const searchList = async (pageNum, pageSize) => {
    if (!keyword.value) return false;
    try {
        const res = await articleList({
            title: keyword.value,
            page_num: pageNum,
            page_limit: pageSize,
        });
        searchData.result = res.list;
        paging.value.complete(res.list);
    } catch (error) {
        paging.value.complete(false);
    }
};

searchData.search_history = storage.get(PREFIX + SEARCH_HISTORY) || [];
</script>

<style lang="scss" scoped>
.search-container {
    height: calc(100vh - 46px);

    .history-content {
        height: 100%;
        background-color: white;

        .keyword {
            display: inline-block;
            margin: 20rpx 16rpx 0 0;
            padding: 8rpx 24rpx;
            border-radius: 26rpx;
            background-color: #f4f4f4;
        }
    }

    .search-content {
        height: 100%;
    }
}
</style>
